<template>
	<view class="full_box">
		<view class="type_list">
			<view v-for="(item, index) in all_singer_list" :key="item.type"
				:class="['u-font-24', 'type', {'active_type': cur_singer_index === index}]">
				| {{item.type}}
			</view>
		</view>
		<swiper @change="singerSwiperChange" next-margin="60rpx" class="sw">
			<swiper-item v-for="(item, index) in all_singer_list" :key="item.id" class="list">
				<view v-for="(item2, index2) in item.list" class="singer">
					<image :src="item2.avatar" mode="aspectFill" class="avatar"></image>
					<view class="ctx">
						<view class="u-line-1 .u-font-26 name">{{item2.name}}</view>
						<view class="u-line-2 .u-font-20 dec">{{item2.dec}}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "recommend-singer",
		props:{
			all_singer_list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				cur_singer_index: 0,
			};
		},
		methods: {
			singerSwiperChange(e){
				// console.log(e);
				this.cur_singer_index = e.detail.current;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.full_box {
		width: 750rpx;

		.type_list {
			margin-left: 30rpx;
			display: flex;

			.type {
				margin-right: 10rpx;
				color: $xj-text-noactive;
			}

			.active_type {
				color: $xj-theme;
				font-weight: bold;
			}
		}

		.sw {
			height: 350rpx;
		}

		.list {
			padding-top: 20rpx;
			display: flex;

			.singer {
				margin-left: 30rpx;
				flex-shrink: 0;
				width: 196rpx;
				height: 320rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 10rpx;
				box-shadow: 0px 0px 4px 0px $xj-theme;
				overflow: hidden;

				.avatar {
					width: 220rpx;
					height: 200rpx;
					background-color: $xj-theme;
				}

				.ctx {
					padding: 8rpx;

					.name {
						color: $xj-theme;
					}

					.dec {
						color: $xj-theme;
						opacity: .5;
					}
				}
			}
		}
	}
</style>
